<template>
  <el-dialog
    :title="form.id?'编辑':'新增'"
    :visible.sync="dialogVisible"
    :before-close="close"
    width="40%"
  >
    <el-form label-width="80px">
      <el-form-item label="组织名称">
        <ClassifyTreeSelect
          @input="getBranchId"
          @getValue="getBranchNode"
          :value="form.partyOrgId"
          size="mini"
        />
      </el-form-item>
      <el-form-item label="年份">
        <el-date-picker
          v-model="form.year"
          type="year"
          size="mini"
          placeholder="请选择"
        />
      </el-form-item>
      <el-form-item label="月份">
        <el-select v-model="form.startMonth" size="mini" placeholder="请选择">
          <el-option
            v-for="(item,index) in monthList"
            :key="index"
            :label="item"
            :value="index+1"
          />
        </el-select> -
        <el-select v-model="form.endMonth" size="mini" placeholder="请选择">
          <el-option
            v-for="(item,index) in monthList"
            :key="index"
            :label="item"
            :value="index+1"
          />
        </el-select>
      </el-form-item>
      <div class="titleStyle">
        <span>一键代入党费</span>
      </div>
      <el-form-item label="年份">
        <el-date-picker
          v-model="form.bringYear"
          type="year"
          size="mini"
          placeholder="请选择"
        />
      </el-form-item>
      <el-form-item label="月份">
        <el-select v-model="form.bringStartMonth" size="mini" placeholder="请选择">
          <el-option
            v-for="(item,index) in monthList"
            :key="index"
            :label="item"
            :value="index+1"
          />
        </el-select> -
        <el-select v-model="form.bringEndMonth" size="mini" placeholder="请选择">
          <el-option
            v-for="(item,index) in monthList"
            :key="index"
            :label="item"
            :value="index+1"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="download">下载模板</el-button>
        <el-upload
          class="upload-demo"
          action="#"
          :multiple="false"
          :limit="1"
        >
          <el-button size="mini" type="primary" @click="importData">导入</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import ClassifyTreeSelect from '@/components/classifyTree/classifyTreeSelect.vue'
import { add, edit } from '@/api/cadreBusiness/feeAmountManagement'
export default {
  components: { ClassifyTreeSelect },
  data () {
    return {
      dialogVisible: false,
      form: {}
    }
  },
  methods: {
    open (row) {
      this.form = { ...row }
      this.dialogVisible = true
    },
    confirm () {
      let submitForm = add
      if (this.form.id) {
        submitForm = edit
      }
      submitForm(this.form).then((res) => {
        this.$message.success('保存成功')
        this.$emit('getData')
        this.close()
      })
    },
    getBranchNode (node) {
      this.form.partyOrgId = node?.id || null
      this.form.partyOrgName = node?.fullNamePartyOrg || null
    },
    getBranchId (id) {
      // console.log('id', id)
    },
    close () {
      this.form = {}
      this.dialogVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .titleStyle {
    font-weight: 600;
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 8px;
    background-color: #d8eff9;
    display: flex;
    justify-content: space-between;
  }
  .upload-demo {
    display: inline-block !important;
    margin-left: 16px;
  }
</style>
